<template>
    <div class="app-container">
        <el-dialog :visible.sync="dialogVisible" title="签到记录" position="center" width="800px">
            <div class="mb-20 flex justify-between">
                <span class="flex-1" style="color:green">正常：{{ times.normal }}次</span>
                <span class="flex-1" style="color:orange">迟到：{{ times.late }}次</span>
                <span class="flex-1" style="color:blue">请假：{{ times.leave }}次</span>
                <span class="flex-1" style="color:red">旷课：{{ times.miss }}次</span>
            </div>
            <el-table :data="signs" border>
                <el-table-column label="上课时间" prop="dateTime" />
                <el-table-column label="签到结果" prop="result_name" />
                <el-table-column label="消耗课时" prop="course_num" />
                <el-table-column label="签到时间" prop="created_at" />
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
    import studentCourseApi from '@/api/student-course'
    export default {
        name: 'CourseSigns',
        data() {
            return {
                dialogVisible: false,
                times: {
                    normal: 0,
                    late: 0,
                    leave: 0,
                    miss: 0
                },
                signs: [
                    {
                        className: '班级',
                        // teacher: '王老师',
                        result: '已签到', // 可以是已签到、未签到、已过期等不同的状态
                        course_num: 0,
                        dateTime: '',
                        created_at: ''
                    }
                ]
            }
        },
        methods: {
            show(studentId, courseId) {
                this.dialogVisible = true
                this.times = {
                    normal: 0,
                    late: 0,
                    leave: 0,
                    miss: 0
                }
                studentCourseApi.signs(studentId, courseId).then(res => {
                    this.signs = res.data
                    this.signs.forEach(item => {
                        item.dateTime = item.date + ' ' + item.time
                        switch (item.result) {
                            case 1: this.times.normal++; break
                            case 2: this.times.late++; break
                            case 3: this.times.leave++; break
                            case 4: this.times.miss++; break
                        }
                    })
                })
            }
        }
    }
</script>
